<!doctype html>
<html style="height: 100%;">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/lib/remtest.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		
		<style>
			.mui-grid-view.mui-grid-9 {
				margin: 0;
				padding: 0;
				border-top: 0px solid #eee;
				border-left: 0px solid #eee;
				background-color: #1A2836;
			}
			
			.mui-grid-view.mui-grid-9 .mui-table-view-cell {
				border-right: 0px;
				border-bottom: 0px;
			}
			
			.mui-card .mui-table-view {
				margin-bottom: 0;
				border-top: 0;
				border-bottom: 0;
				border-radius: 0px;
			}
			
			.mui-table-view-cell:after {
				content: "";
				height: 0px;
			}
			
			.dzfont {
				font-size: 0.7rem;
			}
			
			.xzfont {
				font-size: 0.3rem;
			}
			
			.r {
				color: #ee0d0d;
			}
			
			.g {
				color: #189715;
			}
			
			#dierul li {
				padding: 10px 15px;
				color: #FFFFFF;
				font-size:0.26rem !important;
			}
			
			#dierul li .mui-media-body {
				color: #FFFFFF;
			}
			
			.mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active {
				background-color: #1A2836;
			}
		</style>

	</head>

	<body>
		<div class="mui-content mui-fullscreen">
			<div class="mui-card">
				<div class="mui-card-content" style="" id="cc">

					<div>

						<ul class="mui-table-view mui-grid-view mui-grid-9" id="ss">
							<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6" style="margin: 0 auto;display: block;">
								<div class='r' id='marketTop' style="padding-top: 20px;">
									<span id="newprice" class="dzfont"></span><br>
									<span id="updown" class="xzfont"></span>
									<span id="updownrate" class="xzfont"></span>
								</div>
							</li>

						</ul>
					</div>
 
					<ul class="mui-table-view mui-grid-view mui-grid-9" id="dierul">
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" style="padding-left: 0px;padding-right: 0px;">
							<!--style="padding-left: 0px;padding-right: 0px;"-->
							<div class="mui-media-body">今开：<span id="open"></span></div>
							<div class="mui-media-body">昨收：<span id="lastclose"></span></div>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" style="padding-left: 0px;padding-right: 0px;">
							<div class="mui-media-body">最高：<span id="high"></span></div>
							<div class="mui-media-body">最低：<span id="low"></span></div>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" style="padding-left: 0px;padding-right: 0px;">
							<div class="mui-media-body">成交量：<span id="volume"></span></div>
							<div class="mui-media-body">成交额：<span id="amount"></span></div>
						</li>

					</ul>

				</div>
			</div>

			<div class="mui-card" style="height: 80%;">
				<div class="mui-card-content ">
					<div class="market-chart-box-bd ">

						<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
							<div class="mui-scroll" id="qtype">

								<div class="market-chart-tab" id='market-chart-tab'>
									<a class="mui-control-item mui-active" href="javascript:;" style="padding:0 7px" data-chart="line">分时</a>
									<a class="mui-control-item" href="javascript:;" style="padding:0 7px" data-chart="line5">五日</a>
									<a class="mui-control-item" href="javascript:;" style="padding:0 7px" data-chart="kd">日K</a>
									<a class="mui-control-item" href="javascript:;" style="padding:0 7px" data-chart="kw">周K</a>
									<a class="mui-control-item" href="javascript:;" style="padding:0 7px" data-chart="km">月K</a>
									<a class="mui-control-item" href="javascript:;" style="padding:0 7px" data-chart="k1h">60分</a>
									<a class="mui-control-item" href="javascript:;" style="padding:0 7px" data-chart="k30m">30分</a>
									<a class="mui-control-item" href="javascript:;" style="padding:0 7px" data-chart="k5m">5分</a>
									<a class="mui-control-item" href="javascript:;" style="padding:0 7px" data-chart="k1m">1分</a>

								</div>
							</div>
						</div>

						<div class="market-chart-detail">
							<div class="market-chart-status" id="errDialog" style="display:none;z-index:100;">
								<p>暂时无法获取数据</p>
								<a href="javascript:;">刷新试试</a>
							</div>
							<div id="mychart1" style="width:100%;height:260px;"></div>
							<style>
								#real-time-line {
									position: absolute;
									width: 100%;
									margin-top: -30px;
									padding-left: 50px;
									clear: both;
								}
								
								#real-time-line ul {
									padding: 0px;
								}
								
								#real-time-line li {
									display: inline-block;
									zoom: 1;
									float: left;
								}
								
								.first-child {
									width: 33%;
								}
								
								.second-child {
									width: 40%;
								}
								
								.end-child {
									width: 50px;
									text-align: right;
									margin-right: 0px;
								}
							</style>
							<div id="real-time-line" style="display:none;">
								<ul class="real-time-label-today">
									<li class="first-child">20:00</li>
									<li class="second-child">02:30 / 9:00</li>
									<!--<li class="third-child">11:30 / 13:30</li>-->
									<li class="end-child">15:30</li>
								</ul>
								<ul class="real-time-label f-dn"></ul>
							</div>
							<div id="mychart2" style="width:100%;height:80px;"></div>
						</div>

					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/xdate/xdate.js"></script>
		<script type="text/javascript" src="../js/lodash/lodash.min.js"></script>
		<script type="text/javascript" src="../js/Common.js"></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/mui.jsonp.js"></script>
		<script type="text/javascript" src="../js/h.js"></script>

		<script type="text/javascript">
			mui.init();
		</script>

		<script type="text/javascript" src="../js/require.js?v=20170322"></script>
		<script type="text/javascript" src="../js/marketView.js"></script>
		<script type="text/javascript">
			require(["app/market"], function(m) {
				m.init();
			});
		</script>

	</body>

</html>